<template>
  <div class="tab-container">
    <ul class="tab-head">
      <slot></slot>
    </ul>
    <content-container :panels="panels" />
  </div>
</template>

<script>
  import ContentContainer from './content-container.vue' // 用于展示tab内容的组件
  export default {
    name: 'tabs2',
    data() {
      return {
        panels: [] // 子组件mounted的时候将自己push到该数组中
      }
    },
    props: {
      value: {
        type: [String, Number],
        required: true
      }
    },
    methods: {
      tabChange(index) {
        this.$emit('tabChange',index)
      }
    },
    components: {
      ContentContainer
    }
  }
</script>

<style scoped>
.tab-container{
  width: 100%;
}
.tab-head {

  width: 384px;
  margin: 0 auto;
  font-size: 0;
}
.tab-head:first-child{
  margin-right: 40px;
  width: 384px;

  font-size: 0;
}
</style>
